
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>

    <title>Stacking Context Examples: opacity</title>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		function updateZIndex(z) {
			$('#div7').css('zIndex', z)
				.find('span.applied').text(z)
				.siblings('span.actual').text($('#div7').css('zIndex'));
		}
	</script>
	
	<link rel="stylesheet" type="text/css" href="example.css" />
    <style type="text/css">
#div1 { z-index: 1 ; margin-bottom: 80px;}
		
#div7 {
	border: 1px dashed #696;
	padding: 10px;
	background-color:#FFFFCC;
	position:absolute;
	top:50px;
	left: 240px;
	width:360px;
	padding: 40px 10px;
	z-index:7;		
}	


    </style>

  </head>
  <body>

    <div id="div1">
      <h1>Division Element #1</h1>
      <code>position: relative;<br/>
      z-index: 1;</code>
    </div>

    <div id="div7">
      <h1>Division Element #7</h1>
      <code>position: absolute;<br/>
      we set this z-index: <span class="applied">7</span>;<br/>
	  the detected z-index: <span class="actual">7</span>;
	  </code>
    </div>

	
	<div id="description">
		<h1>IE6 / IE7</h1> 
		Bug where the z-index cannot be reset if it is given a non-zero starting value.<br/>
		In this example, #div7 (z-index:7) appears above #div1 (z-index:7) <br/>
		Setting the z-index to 'auto' or 0 has no effect.<br/><br/>
		<ul>
			<li><a href="javascript:updateZIndex('auto')">Change the z-index to "auto"</a> (supposed to send it to the back)</li>
			<li><a href="javascript:updateZIndex('0')">Change the z-index to 0</a> (supposed to send it to the back)</li>
			<li><a href="javascript:updateZIndex('')">Change the z-index back to the original</a></li>
		</ul>
	</div>
	
	
  </body>
</html>
